<!-- 我的活动列表 -->
<template>
    <div class='about_wrapper'>
        <ul class="list_con">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
                <div v-if="activityData.length>0">
                    <li class="list_every" v-for="(v,i) in activityData" :key="i" @click="PostDetail(v)">
                        <div class="fbImg"><img :src="picUrl(v.url)" /></div>
                        <div class="noticexx">
                            <div>{{v.activityStatus}}</div>
                            <p>{{v.title}}</p>
                        </div>
                        <div class="ys">
                            <p><img src="@/assets/activity/chakan.png" alt="">{{v.browseTimes}}</p>
                            <p>报名：{{v.signUpNumberAdd}}/{{v.signUpNumber}}</p>
                        </div>
                        <div style="height:20px;background:#f7f7f7;margin:15px 0;"></div>
                    </li>
                </div>
                <div class="noDatay" v-else><img src="@/assets/my/kkk.png" alt=""></div>
            </van-list>
        </ul>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                activityData: [],
                BMrs: '',
                pageIndex: 1,
                pageSize: 8,
                totalCount: 0,
                loading: false,
                finished: false,
            };
        },
        //方法集合
        methods: {
            loadData() {
                // 异步更新数据
                setTimeout(() => {
                    this.loading = true;
                    this.loadactivity();
                    this.loading = false;
                    if (this.activityData.length >= this.totalCount) {
                        this.finished = true;
                    }
                }, 1000);
            },
            loadactivity() {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                this.post('community_activity/loadInfoMine', {
                    wxId:this.slow.userInfo.openId
                    // wxId:'o9g_ywafeOGzxbOQ_IQ7HXKOSDIM',
                }).then(r => {
                    this.$toast.clear();
                    // this.activityData = r.list;
                    this.activityData = this.activityData.concat(r.list);
                    this.totalCount = r.pageInfo.totalCount;
                    this.pageIndex += 1;
                })
            },
            PostDetail(v) {
                this.$router.push({
                    path: '/MyActivitiesxq',
                    query: {
                        DetailData: v
                    }
                });
            }
        },
        created() {}
    }
</script>
<style lang="scss" scoped>
    .list_con {
        padding: 0 8vw;
        .list_every {
            .fbCon {
                span:nth-child(1) {
                    color: red;
                    margin-right: 10px;
                }
            }
            .fbImg {
                margin-top: 15px;
                height: 45vw;
                img {
                    width: 84vw;
                    height: 45vw;
                }
            }
            .noticexx {
                display: flex;
                margin-top: 15px;
                align-items: center;
                div:nth-child(1) {
                    padding: 1.5vw 3vw;
                    background: #e7983c;
                    color: #ffffff;
                    vertical-align: bottom;
                    font-size: 12px;
                    border-radius: 12px;
                    margin-right: 5px;
                }
            }
            .ys {
                margin-top: 15px;
                display: flex;
                p:nth-child(1) {
                    margin-right: 15px;
                    img {
                        width: 20px;
                        vertical-align: bottom;
                        margin-right: 5px;
                    }
                }
            }
        }
        .noDatay {
            position: absolute;
            top: 0px;
            bottom: 0;
            width: 84vw;
            display: flex;
            justify-content: center;
            img {
                display: block;
                width: 50vw;
                height: 50vw;
                margin-top: 40vw;
            }
        }
    }
</style>